<div class="content">
    <div>
        <v-btn elevation="1" color="primary" class="buttontext--text addroutebutton" :to="addRouteButtonTo">Add Route
        </v-btn>
        <v-row no-gutters>
            <v-col cols="12" md="6" sm="6">
                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details>
                </v-text-field>
            </v-col>
        </v-row>
        <v-row no-gutters>
            <v-col cols="12" md="11" sm="12">
                <v-data-table :headers="headers" :items="routes" :items-per-page="5" :search="search"
                    :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" no-data-text="No routes available">
                    <template v-slot:item.actions="{ item }">
                        <v-icon class="mr-2" @click="editItem(item)">
                            mdi-eye
                        </v-icon>
                        <v-icon @click="deleteItem(item)">
                            mdi-delete
                        </v-icon>
                    </template>
                </v-data-table>
            </v-col>
        </v-row>
        <v-row class="route-errors-title">
            <v-col cols="12" md="11" sm="12">
                Route errors:
            </v-col>
        </v-row>
        <v-row no-gutters>
            <v-col cols="12" md="11" sm="12">
                <v-data-table :headers="errorHeaders" :items="routeErrors" :items-per-page="5"
                    :sort-by.sync="errorSortBy" :sort-desc.sync="sortDesc" no-data-text="No route errors">
                </v-data-table>
            </v-col>
        </v-row>
    </div>
    <confirmation-dialog ref="confirmationDialog"></confirmation-dialog>
</div>